<template>
  <div class="flex gap-2">
    <Card class='w-6'>
      <template #title>查询缓存</template>
      <template #content>
        <TabView>
          <TabPanel header="Redis">
						<div class="p-inputgroup flex-1">
							<span class="p-inputgroup-addon">KEY</span>
							<InputText placeholder="请输入key" v-model="key" />
						</div>
          </TabPanel>
        </TabView>
				<Button label="查询" @click="handleSubmit"/>
      </template>
    </Card>
    <Card  class='w-6'>
      <template #title>查询结果</template>
      <template #content>
        <div>
          <p>有效时间：{{ toolStore.getCache.ttl }}</p>
          <p>查询结果：{{ toolStore.getCache.val }}</p>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { Card, TabPanel, TabView, InputText, Button } from "@/utils/primevue";
import { ref } from 'vue';
import useToolStore from '@/stores/tool'
const key = ref('')
const toolStore = useToolStore()

const handleSubmit = () => {
	console.log('key', key, toolStore)
	toolStore.searchCache({ redisKey: key.value })
}
</script>

<style scoped lang="less"></style>
